<template>
    <div
        class="logo-container"
        ref="containRef"
        :style="{ 
            width: containerWidthRef + 'px',
            // transitionDuration: '300ms', 
            }"
    >
        <router-link
            class="h-full w-full flex items-center justify-center"
            to="/"
        >
            <div class="wrap">
                <img :src="aLogoUrl" class="w-5 h-5" />
                <div class="title" ref="titleRef"
                    :style="{width:titleWidthRef+'px'}"
                >
                    {{ aTitle }}
                </div>
            </div>
        </router-link>
    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";

//#region defineXxx
defineOptions({
    name: "logo",
});

const props = defineProps({
    aHeight: {
        type: Number,
        default: 100,
    },
    aExpandWidth: {
        type: Number,
        default: 300,
    },
    aCollapseWidth: {
        type: Number,
        default: 150,
    },
    aLogoUrl: {
        type: String,
        default: "/vite.svg",
    },
    aTitle: {
        type: String,
        default: "LogoText",
    },
    aIsCollapse: {
        type: Boolean,
        default: false,
    },
    aTransitionDuration:{
        type:String,
        default:'2500ms'
    }
    // propC:{
    //     type:String as PropType<MyType>,
    //     required:true
    // },
});

const emit = defineEmits<{
    event1: [para1: number, para2: string];
    event2: [para1: number, para2: string];
}>();
//#endregion
const containerWidthRef = computed(() => {
    if (props.aIsCollapse) {
        return props.aCollapseWidth;
    } else {
        return props.aExpandWidth;
    }
});

const titleRef = ref<HTMLDivElement>();
const titleWidthRef=ref();
let titleWidth: undefined | number = undefined;

onMounted(() => {
    titleRef.value!.style.opacity='0';
    titleWidth=titleRef.value!.clientWidth;
    if(props.aIsCollapse){
        titleRef.value!.style.width='0';
    }else{
        titleRef.value!.style.opacity='100%';
    }
});

function showTitle(){
    titleRef.value!.style.opacity='100%';
    titleRef.value!.style.width='0';
    titleRef.value!.clientHeight;//force relfow
    titleRef.value!.style.transition=props.aTransitionDuration+'ms';
    titleRef.value!.style.width=titleWidth+'px';
}

function hideTitle(){
    //titleRef.value!.style.transition='none';
    titleRef.value!.style.width='0';
    titleRef.value!.style.opacity='0';
}

watch(()=>props.aIsCollapse,()=>{
    if(props.aIsCollapse){
        hideTitle()
    }else{
        showTitle();
    }
})

</script>
<style lang="less" scoped>
.logo-container {
    background: #314155;
    // background: var(--el-bg-color-overlay);
    // width: $sideBarHideWidth !important;
    // transition: all 1s ease;
    height: 1.5em;
    // width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 500ms ease 0s;
}
.wrap{
    display: flex;
    justify-content: center;
    align-items: center;
}
img {
    width: 1.25em;
    height: 1.25em;
}
.title {
    color: white;
    font-size: 1em;
    font-weight: bold;
    margin-left: 5px;
    overflow: hidden;
}
</style>
